<template>
	<view class="work-contant">

		<view class="seach-box">
			<view class="input-item flex align-center">
				<view class="iconfont icon-sousuo icon"></view>
				<input class="input" v-model="targetOrTypeName" @confirm="searchHandler" type="text" maxlength="30" />
				<!-- 清空按钮 -->
				<view class="clean-symbol" v-if="targetOrTypeName" @click="clearInput">×</view>
			</view>
			<view class="seach-btn">
				<button type="default" @click="searchHandler">
					搜索
				</button>
			</view>
		</view>

		<view class="content">
			<!-- 分类内容 -->
			<view class="type-contant">
				<view class="type-item" v-for="(item, index) in typeData">
					<image :src="item.typeCoverUrl" mode="scaleToFill" @click="opentTypeTab(item.id)" />
					<text @click="opentTypeTab(item.id)">
						{{ item.typeName }}
					</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import {
	listType
} from '@/api/work/work'
export default {
	data() {
		return {
			typeData: undefined,
			targetData: undefined,

			targetOrTypeName: undefined,

			loadTypeData: {
				typeName: undefined,
				loadCount: 18
			}
		}
	},

	onLoad: function (option) {
		this.handleListType()
	},

	onPullDownRefresh() {
		console.log('refresh');
		this.handleListType()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},

	onReachBottom() {
		// console.log('页面触底');
		this.loadTypeData.loadCount += 3
		// 查询数据
		this.handleListType()
	},

	methods: {
		// 清空方法
		clearInput() {
			// 将输入框的值设置为空
			this.targetOrTypeName = ''
			// 查询数据
			this.handleListType()
		},

		searchHandler() {
			console.log('点击搜索 查询条件 ', this.targetOrTypeName)
			this.handleListType()
		},

		handleListType() {
			this.loadTypeData.typeName = this.targetOrTypeName
			listType(this.loadTypeData).then(res => {
				// this.typeData = res.data.map(item => item.typeName)
				this.typeData = res.data
			})
		},

		opentTypeTab(id) {
			console.log('打开对应类型', id);
			uni.navigateTo({
				url: '/pages/media/media?typeId=' + id
			});
		},

	}
}
</script>

<style lang="scss">
.work-contant {

	.type-contant {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: center;

		.type-item {
			width: 235rpx;
			margin: 4px;

			image {
				height: 120px;
				width: 100%;
				border-radius: 10%;
			}
		}

	}

	.seach-box {
		display: flex;

		/* #ifdef MP-WEIXIN */
		margin-top: 65px;
		/* #endif */

		/* #ifdef APP-IOS */
		margin-top: 0px;
		/* #endif */
		margin-left: 10px;
		margin-right: 10px;

		.input-item {
			width: 80%;
			margin: 20px auto;
			background-color: #f5f6f7;
			height: 45px;
			border-radius: 20px;
			margin-right: 5px;
			/* background-color: red; */

			.icon {
				font-size: 38rpx;
				margin-left: 10px;
				color: #999;
			}

			.input {
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
			}

			.clean-symbol {
				font-size: 18px;
				margin-right: 15px;
			}
		}

		.seach-btn {
			border-radius: 30px;
			margin: 20px auto;
			margin-left: 10px auto;
			width: 20%;
			font-size: 14px;
			text-align: center;
			background-color: #f5f6f7;
		}
	}

}
</style>